<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>寻找室友</title>

  <!-- Bootstrap -->
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath()%>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath()%>/static/js/respond.min.js"></script>
    <![endif]-->
      <style>
    	td{
    	  text-align:center;
    	}
    </style>
</head>
<body>
 <jsp:include page="../Common/navHeader.jsp"></jsp:include>

<div class="container">

	  <br>
	  <br>       
      <div class="row">
          <div class="col-lg-3 col-sm-2"></div><!--左侧不用-->
          <div class="col-lg-6 col-sm-8 col-xs-12">
         	<h3>经过筛选，我们推荐下列用户作为您的室友</h3>
         </div><!-- /.col-sm-4 -->
         <div class="col-lg-3 col-sm-2"></div><!--右侧不用-->
      </div>
       
      <br/>
      <br/>   
      
	  <div class="row">
      <jsp:include page="navLeftBarForGrouping.jsp"></jsp:include>
      <div class="col-sm-9 col-xs-12">
	  
	  <c:set var="i" value="0" />
      <c:if test="${roommates ne null }">         
  
	  <div class="table-responsive">
	    <table id="userTable" class="table table-hover table-stripped">
		  <tr style="background:aliceblue">
		    <td style="min-width:60px">用户名</td>
		    <td>性别</td>
		    <td>所在单位</td>
		    <td>休息时间</td>
		    <td>起床时间</td>
		    <td>民族</td>
		    <td>信仰</td>
		    <td>相似度（百分制）</td>
		    <td>是否推荐</td>
		    <td>操作</td>
		  </tr>
		  
		  <c:set var="i" value="0" />
		  <c:forEach var="item" items="${roommates}">
		    <c:set var="i" value="${i + 1 }" />
			<tr>
			  <td><a href="<%=request.getContextPath() %>/Account/ShowUserDetailInfo?userid=${item.userid }" target="_blank">${fn:escapeXml(item.username) }</a></td>
			  <td>${fn:escapeXml(item.gender) }</td>
			  <td>${fn:escapeXml(item.universityName) }</td>
			  <td>${fn:escapeXml(item.sleeptimeFormatted) }</td>
			  <td>${fn:escapeXml(item.wakeuptimeFormatted) }</td>
			  <td>${fn:escapeXml(item.nation) }</td>
			  <td>${fn:escapeXml(item.belief) }</td>
			  <td>${fn:escapeXml(item.grade) }</td>
			  <td style="text-align:center">
			  <c:if test="${item.grade>=85 }">
			  		<span class="glyphicon glyphicon-ok"></span>
			  </c:if>
			   <c:if test="${item.grade<85 }">
			  		<span class="glyphicon glyphicon-remove"></span>
			  </c:if>
			  </td>
			  <td class="text-center">
			    <a href="#" class="addMessageLink btn btn-success" data-destination="${item.userid}">申请</a>
			  </td>
			</tr>
		  </c:forEach>
		</table>
	  </div>
	   
	  <br/>
	    	  
      <c:if test="${i eq 0 }">
        <div class="alert alert-warning" role="alert">
           	不好意思，匹配室友数为零！请在有用户录入自己数据后再次前来匹配！&nbsp;&nbsp;&nbsp;&nbsp;
            <a  href="<%=request.getContextPath() %>/Posting/AddPosting?domain=${fn:escapeXml(param.domain)}" role="button">立刻前往发帖&raquo;</a>
        
        </div>
      </c:if>
      
      </c:if>
      
      <c:if test="${roommates eq null }">  
        <div class="alert alert-warning" role="alert">
           	 搜索失败！<br/>
           	 原因可能是：<br/>
           	 1.您的作休数据不完整<a  href="<%=request.getContextPath() %>/Posting/AddPosting?domain=${su:encodeUriComponent(param.domain)}" role="button">前往完善&raquo;</a><br/>
           	 2.当前还没有具有完善的个人详情数据和个人作休数据的用户<br/>
           	 抱歉！<br/>   
        </div>
      </c:if>
      <br/>
      <div class="alert alert-warning" role="alert">
      		相似度加分规则如下：<br/>
      		1、总分100分制。<br/>
      		2、性别相同加20分，不同不加分。<br/>
      		3、所在单位相同加10分，不同不加分。<br/>
      		4、信仰相同加10分，不同不加分。<br/>
      		5、民族相同加10分，不同不加分。<br/>
      		6、起床时间相差不超过1小时加30分，超过1小时但不超过2小时加20分，超过2小时但不超过3小时加10分。否则，不加分。<br/>
      		7、休息时间相差不超过1小时加20分，超过1小时但不超过2小时加10分，超过2小时但不超过3小时加5分。否则，不加分。
      		        默认最迟休息时间在凌晨0-6点。<br/>
      		8、相似度得分大于等于85的，我们推荐作为室友，用<span class="glyphicon glyphicon-ok"></span>
      		表示。否则，我们不推荐作为室友，用<span class="glyphicon glyphicon-remove"></span>表示。<br/>
      		
      </div>
      </div>
      <div class="col-sm-1"></div><!--右侧不用-->
    </div>
 
  <jsp:include page="../Common/Footer.jsp"></jsp:include>

</div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=request.getContextPath()%>/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    window.addMessageBusy = false;
    
    $(document).ready(function() {
    	$("a.addMessageLink").click(function() {
			if (window.addMessageBusy) return false;
			window.addMessageBusy = true;

			$("a.addMessageLink").addClass("disabled");
			
    		var destination = $(this).data("destination");
    		
    		var postData = {destination : destination};
    		$.ajax({
    			method: "POST",
    			url: "<%= request.getContextPath()%>/Message/AddMessage",
    			contentType : "application/json",
    			data: JSON.stringify(postData),
    			dataType : "json",
    			success: function(data) {
    				if (data.status == 0) {
    					alert("申请成功！");
    				} else {
    					alert(data.message);
    				}
    			},
    			error: function() {
    				alert("服务器连接失败！");
    			},
    			complete: function() {
    				$("a.addMessageLink").removeClass("disabled");
    				window.addMessageBusy = false;
    			}
    		});
    		
    		
    		return false;
    	});
    });
    
    </script>
</body>
</html>